<template>
  <div>
     <div v-if="Object.keys(show).length !== 0" class="goods-info">
       <div class="info">
         <div class="start"></div>
         <div class="desc">{{show.desc}}</div>
         <div class="end"></div>
       </div>
     <div class="effect">{{show.detailImage[0].key}}</div>
     <div class="info-list">
     <img v-for="(item,index) in show.detailImage[0].list"
      :key="index" :src="item" @load="imgLoad" alt="">
     </div>
     </div>
  </div>
</template>

<script>
  export default{
    name:'detailShow',
    components:{

    },
    props: {
      show: {
        type: Object
      }
    },
    data() {
      return {
        counter: 0,
        imagesLength: 0,
      }
    },
    methods: {
      imgLoad(){
        if(++this.counter === this.imagesLength){
          this.$emit('imgLoad')
          // console.log('emit')
        }
      }
    },
    watch: {
      show(val,oldval) {
        this.imagesLength = val.detailImage[0].list.length

      }
    },
  }
</script>

<style scoped>
  .info{
    margin-top: 20px;
  }
  .info-list img{
    width: 100%;
  }
  .start{
    width: 50%;
    height: 1px;
    border-top: 4px solid darkgray;
  }
  .end{
    width: 50%;
    height: 1px;
    border-bottom: 4px solid darkgray;
    float: right;
  }
  .effect{
    font-weight: bold;
    margin: 10px auto;
    width: 80px;
    text-align: center;
  }
</style>
